<template>
  <div>
    <div class="tolist">
    <h1>完成事项</h1>
      <ul >
        <li v-for="item in donelist">
          <span>{{item.id}}</span>
           <span>{{item.title}}</span>
           <button @click="toDone(item)">还未完成</button>
           <button >删除</button>
        </li>
      </ul>
  </div>
  </div>
</template>
<script setup>
import {ref} from 'vue'
import mitt from '@/utils/mitter'
// vue3 兄弟组件传值推荐使用mitt插件
// mitt插件 也是基于eventBus原理的插件
// eventBus是基于js的发布订阅模式
// 1.安装 mitt插件 npm i mitt
   let donelist=ref([
    
   ])
  //  mitt插件on方法 监听触发的事件 并存储
   mitt.on("sendItem",(item)=>{
      donelist.value.push(item)
   })
  //  点击还未完成
   let toDone=(item)=>{
    let myitem=JSON.parse(JSON.stringify(item))
    myitem.isDone=false;
      mitt.emit("sendNoDone",myitem)
      // 从本数据项第一次出现的下标处删除
      donelist.value.splice(donelist.value.indexOf(item),1)
   }
</script>
<style lang="scss" scoped>
   .tolist{
      width: 550px;
      height: 400px;
      background: pink;
      ul{
        list-style: none;
           width: 500px;
          li{
          display: flex;
          height: 60px;
          line-height: 60px;
          justify-content: space-around;
          margin-top: 10px;
          }
      }
    }
</style>